<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/> 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />
</head>
<body>
<div class="row row-default border-ra2">
	<div class="col-sm-12">	
		<div class="row row-content">
			<div class="col-xs-12">
				<div class="table-responsive">
					<form class="form-horizontal">
						<div class="tabbable">
						 <ul class="nav nav-tabs padding-16">
								<li class="active">
									<a data-toggle="tab" href="#">
										<i class="green icon-user bigger-120"></i>
										个人信息
									</a>
								</li>
							</ul>
							<div class="tab-content no-border padding-24">
								<div id="person" class="tab-pane in active">
									<div class="row">
										<div class="col-xs-12 col-sm-3 center">
											<!-- <span class="profile-picture">
												 个人相片
												<img class="editable img-responsive" alt="Alex's Avatar" id="avatar2" src="assets/avatars/profile-pic.jpg" />
											</span> -->

											<div class="space space-4"></div>

											<!-- <a href="#" class="btn btn-sm btn-block btn-success">
												<i class="icon-plus-sign bigger-120"></i>
												<span class="bigger-110">Add as a friend</span>
											</a>

											<a href="#" class="btn btn-sm btn-block btn-primary">
												<i class="icon-envelope-alt bigger-110"></i>
												<span class="bigger-110">Send a message</span>
											</a> -->
										</div>

										<div class="col-xs-12 col-sm-9">
											<h4 class="blue">
												<span class="middle"><shiro:principal property="empName"/></span>
												<!-- <span class="label label-purple arrowed-in-right">
													<i class="icon-circle smaller-80 align-middle"></i>
													online
												</span> -->
											</h4>

											<div class="profile-user-info">
												<div class="profile-info-row">
													<div class="profile-info-name"> 员工姓名 </div>
													<div class="profile-info-value">
														<span><shiro:principal property="empName"/></span>
													</div>
												</div>

												<div class="profile-info-row">
													<div class="profile-info-name"> 员工编号 </div>

													<div class="profile-info-value">
														<!-- <i class="icon-map-marker light-orange bigger-110"></i> -->
														<span><shiro:principal property="empNo"/></span>
														
													</div>
												</div>											
												<div class="profile-info-row">
													<div class="profile-info-name"> 手机号 </div>
													<div class="profile-info-value" id="telphone">
														
													</div>
												</div>
											</div>

											<div class="hr hr-8 dotted"></div>
										</div><!-- /span -->
									</div><!-- /row-fluid -->

									<div class="space-20"></div>

									<!-- <div class="row">
										<div class="col-xs-12 col-sm-12">
											<div class="widget-box transparent">
												<div class="widget-header widget-header-small">
													<h4 class="smaller">
														<i class="icon-check bigger-110"></i>
														关于我
													</h4>
												</div>

												<div class="widget-body">
													<div class="widget-main">
														<p>
															My job is mostly lorem ipsuming and dolor sit ameting as long as consectetur adipiscing elit.
														
															Sometimes quisque commodo massa gets in the way and sed ipsum porttitor facilisis.
														
															The best thing about my job is that vestibulum id ligula porta felis euismod and nullam quis risus eget urna mollis ornare.
														
															Thanks for visiting my profile.
														</p>
													</div>
												</div>
											</div>
										</div>
									</div> -->
								</div><!-- person -->
							</div>
						</div>
					</form>	
				</div>
			</div>
		</div>					
	</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
	//通过uuid查询手机号码
	 Otod.ajax({
		url:"${ctx}/sys/emp/getAuapTempDetail.do",
		type:"GET",
		successFn:function(data){
			
			showTelphone(data.mobile);
		}
	});
	
	$("#telphone").on("click","a",function(){		
		showUpdateTelphone($(this).attr("key"));
	});
	//保存修改
	$("#telphone").on("click",".saveUpdateFileName",function(){
		
		saveTelphone($(this).attr("key"));
	})
	//取消修改
	$("#telphone").on("click",".exitTeiphone",function(){
		
		exitUpdateTelphone($(this).attr("key"));
	});
	
	
});

/**
 * 显示电话  
 */
function showTelphone(telphone){
	
	var showtelphone = $('#showTeiphone').html();
	Mustache.parse(showtelphone);
	var rendered = Mustache.render(showtelphone,{
		telphone: telphone
	});
	$("#telphone").html(rendered);
}

/**
 * 修改电话  
 */
function showUpdateTelphone(telphone){
	
	var showtelphone = $('#showUpdateTeiphone').html();
	Mustache.parse(showtelphone);
	var rendered = Mustache.render(showtelphone,{
		telphone: telphone
	});
	$("#telphone").html(rendered);
}
/**
 * 取消修改电话
 */
function exitUpdateTelphone(telphone){
	var exittelphone = $('#exitTeiphone').html();
	Mustache.parse(exittelphone);
	var rendered = Mustache.render(exittelphone,{
		telphone: telphone
	});
	$("#telphone").html(rendered);
}
/**
 * 保存电话
 */
function saveTelphone(oldTelphone){
	var newTelphone =$("#telpthone").val();
	   var reg = /^(1[0-9])\d{9}$/;
       if(!reg.test(newTelphone))  
       {
        Otod.Msg.info("请输入正确的手机号码");
         return;
       }
		Otod.ajax({
			 url:'${ctx}/sys/emp/updateOrAddEmp.do',
			 data:{oldTelphone:oldTelphone,newTelphone:newTelphone},
			 type:'GET',
			 successFn:function(data){
				 exitUpdateTelphone(newTelphone);
			 }
		})
}

</script>
<!-- 显示电话模板 -->

<script type="x-tmpl-mustache" id="showTeiphone">
	<span id="telphoneSpan">{{telphone}}</span>
	&nbsp;	&nbsp;	&nbsp;	&nbsp;
	<a href="#" key="{{telphone}}" style="margin-left: 20px" title="修改手机号码">
		<i class="icon-pencil"></i>
	</a>
</script>
<!-- 修改电话模板 -->	
<script type="x-tmpl-mustache" id="showUpdateTeiphone">
		<input id="telpthone" type="text" value="{{telphone}}">
		<button class="btn btn-xs btn-success saveUpdateFileName" type="button" key="{{telphone}}">
			<i class="icon-ok bigger-110 red"></i>
		</button>
		<button class="btn btn-xs btn-success exitTeiphone" type="button" key="{{telphone}}">
			<i class="icon-remove bigger-110 blue"></i>
		</button>
</script>
<!-- 取消修改电话模板 -->
<script type="x-tmpl-mustache" id="exitTeiphone">
		<span>{{telphone}}</span>
		&nbsp;	&nbsp;	&nbsp;	&nbsp;
		<a href="#" key="{{telphone}}">
			<i class="icon-pencil"></i>
		</a>
</script>
</body>
